<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" size="30" @click="store.commit('collapseMenu')">
                <Fold />
            </el-icon>

            <ul class="flex-box">
                <li 
                    v-for="(item, index) in selectMenu" 
                    :key="item.path"
                    class="tab flex-box">
                    <el-icon size="12">
                        <component :is="item.icon" />
                    </el-icon>
                    <router-link :to="item.path" class="no-underline">
                        {{ item.name }}
                    </router-link>
                    <el-icon size="12" class="close" @click="closeMenu(item, index)">
                        <Close />
                    </el-icon>
                </li>
            </ul>
        </div>

        <div class="header-right flex-box" style="margin-left: auto;">
            <el-dropdown>
                <div class="el-dropdown-link flex-box">
                    <el-avatar shape="square" 
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <p class="user-name">admin</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>我的信息</el-dropdown-item>
                        <el-dropdown-item>我的消息</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { Close, Fold } from '@element-plus/icons-vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter();
const selectMenu = computed(() => store.state.menu.selectMenu);

// 关闭标签页
const closeMenu = (item, index) => {
    store.commit('closeMenu', item); // 假设 Vuex 中有 'closeMenu' mutation

    // 如果当前路由不等于关闭的菜单，则不需要跳转
    if (router.currentRoute.value.path !== item.path) {
        return;
    }

    const menuList = selectMenu.value;

    // 处理删除最后一个标签的情况
    if (index === menuList.length - 1) {
        if (menuList.length === 1) {
            router.push('/'); // 跳转到默认页面
        } else {
            router.push(menuList[index - 1].path);
        }
    } else {
        router.push(menuList[index + 1].path);
    }
};

// 退出登录
const logout = () => {
    router.push('/login');
};
</script>

<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
}

.header-container {
    background-color: #409eff;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.header-left {
    height: 100%;
    .icon {
        width: 30px;
        height: 100%;
    }
    .icon:hover {
        background-color: #f5f5f5;
        cursor: pointer;
        height: 40px;
        width: 40px;
    }
    .tab {
        padding: 0 10px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;

        .text {
            margin: 0 5px;
        }
        
        .close {
            visibility: hidden; // 初始隐藏
            position: absolute;
            right: 0px; // 控制位置，确保在标签右侧
            cursor: pointer;
            color: #ffffff;
            transition: color 0.3s ease; // 增加过渡效果
        }

        &:hover {
            background-color: #f5f5f5;

            .close {
                visibility: visible; // Hover 时显示
                color: #000; // 修改颜色
            }
            a {
                color: #409eff;
            }
            i {
                color: #409eff;
            }
            background-color: #f5f5f0;
        }
    }
}

.header-right {
    height: 100%;
    margin-left: auto;
    .el-dropdown-link {
        gap: 8px;
    }
    .user-name {
        margin: 0;
    }
}

a {
    height: 100%;
    color: #333;
    font-size: 15px;
    text-decoration: none; // 移除下划线
}

a:hover {
    text-decoration: none; // 确保 Hover 时也没有下划线
}
</style>
